<template>
    <div>
        <h1>计数器</h1>
        <div>{{ num }}</div>
        <button @click="increment">+</button>
    </div>
</template>

<script lang='ts'>
/**
 * 在vue3如果要使用组合式API的方式来编写代码，必须为其提供场景，有两种方式可以提供场景
 * 1、setup函数
 * 2、setup语法糖形式（推荐）
 */
import {ref} from 'vue'
 export default{
    setup(){
      let num=ref(10) 
      const increment=()=>num.value+=2
      return{
        num,increment
      }
    }
 }
</script>
<style scoped>
</style>